<template>
    <!-- 搜索栏 -->
    <div class="option">
        <el-card>
            <div class="option_content">
                <div class="option_title" style="display: inline">
                    搜索条件 |
                </div>
                <div class="input-wrapper" style="display: inline">
                    <el-input v-model="flitItem.title" placeholder="请输入标题" clearable class="custom-input" />
                    <el-input v-model="flitItem.type" placeholder="请输入类型" clearable class="custom-input" />
                    <el-input v-model="flitItem.priceLow" placeholder="请输入价格下限" clearable class="custom-input" />
                    <el-input v-model="flitItem.priceHeight" placeholder="请输入价格上限" clearable class="custom-input" />
                    <el-button @click="resetForm">重置</el-button>
                </div>
            </div>
        </el-card>
    </div>

    <div class="job_table">
        <el-card>
            <el-table :data="formarTable" :="{ height: tableHeight }" row-key="id" stripe @row-click="RowClick">
                <el-table-column prop="id" label="ID" style="height: 200px" v-if="false"></el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="jobType" label="类型" />
                <el-table-column prop="salary" :formatter="formatPrice" label="价格" sortable />
                <el-table-column prop="startTime" :formatter="formatTablrDate" label="开始时间" />
                <el-table-column label="状态" :sortable="true" :sort-method="sortByProcess">
                    <template #default="{ row }">
                        <el-tag :type="getTagType(row.process)" effect="light">
                            {{ row.process }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>



    <div class="job_deawer">
        <el-drawer v-model="isOpenDrawer" size="45%" title="详细信息" class="custom-drawer">
            <el-form :model="currentRowData" label-width="120px" class="form-container" status-icon>
                <el-form-item id="publisher" label="发布人">
                    <el-input v-model="currentRowData.userName" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item id="type" label="工作类型">
                    <el-input v-model="currentRowData.jobType" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="title" label="标题">
                    <el-input v-model="currentRowData.title" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item id="detail" label="详情">
                    <el-input v-model="currentRowData.description" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="price" label="价格">
                    <el-input v-model="currentRowData.salary" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="taker" label="接取人">
                    <el-input v-model="currentRowData.takersName" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="startTime" label="开始时间">
                    <el-input v-model="formatDrawerDate.formattedStartTime" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="endTime" label="发布时间">
                    <el-input v-model="formatDrawerDate.formattedPublishTime" :disabled="isEdit" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item style="text-align: center;">
                    <el-button v-if="currentRowData.process === '进行中'" type="success" @click="handleCompleteWork">
                        完成工作
                    </el-button>
                    <el-button v-else-if="currentRowData.process === '已完成'" type="info" @click="handleCompleteWork">
                        工资已结算
                    </el-button>
                    <el-button type="danger" style="margin-left: 10px;" @click="reportDialogVisible = true">
                        举报发布人
                    </el-button>
                </el-form-item>
            </el-form>
        </el-drawer>


        <!-- 举报弹窗 -->
        <el-dialog v-model="reportDialogVisible" title="举报发布人" width="40%">
            <el-form :model="reportForm" label-width="100px" ref="reportFormRef">
                <el-form-item label="举报理由" prop="reason"
                    :rules="[{ required: true, message: '请输入举报理由', trigger: 'blur' }]">
                    <el-input v-model="reportForm.reason" type="textarea" rows="3" placeholder="请输入举报理由"></el-input>
                </el-form-item>

                <el-form-item label="上传材料">
                    <el-upload class="upload-demo" drag multiple :auto-upload="false" :show-file-list="true"
                        :before-upload="beforeUpload" :on-remove="handleRemoveFile" v-model:file-list="reportForm.files"
                        list-type="picture-card">
                        <i class="el-icon-upload"></i>
                        <div>将文件拖到此处，或点击上传</div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button @click="reportDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitReport">提交举报</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import useReceive from "@/hooks/student/useReceive";
import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
import timeFormat from "@/tool/format/timeFormat";

const { formatTablrDate } = timeFormat();



const {
    formarTable,
    flitItem,
    resetForm,
    currentRowData,
    formatDrawerDate,
    isOpenDrawer,
    sortByProcess,
    getTagType,
    isEdit,
    formatPrice,
    getReceiveJobs,
    RowClick,
    handleCompleteWork,

    // 举报功能
    reportDialogVisible,
    reportForm,
    reportFormRef,
    beforeUpload,
    handleRemoveFile,
    submitReport,
} = useReceive();






onMounted(() => {
    nextTick(() => {
        getReceiveJobs();
    })
})


// ==界面表格的动态高度===========================================================================

const tableHeight = ref(0);
const updateTableHeight = () => {
    // 计算动态高度，比如这里设置为窗口高度的 70%
    tableHeight.value = window.innerHeight - 300;
};
onMounted(() => {
    updateTableHeight(); // 页面加载时设置表格高度
    window.addEventListener("resize", updateTableHeight); // 监听窗口大小变化
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", updateTableHeight); // 清理事件监听器
});
</script>

<style lang="css" scoped>
/* 表格样式====================================================================================== */
.job_table {
    position: relative;
    top: 18px;
}

/* 搜索栏样式 ================================================================================ */
.option_title {
    margin-top: 6px;
    margin-right: 15px;
    width: 6%;
    font-family: Verdana;
    /* 设置字体 */
}

.custom-button {
    width: 6%;
    /* 按钮宽度 */
    border-radius: 8px;
    /* 按钮圆角 */
    font-size: 14px;
    /* 按钮字体大小 */
    padding: 12px 20px;
    /* 按钮内边距 */
    margin-left: 50%;
    /* 将按钮居中 */

    /* 按钮的背景颜色和边框颜色 */
    background-color: white;
    /* 按钮背景为白色 */
    border: 1px solid #dcdcdc;
    /* 按钮浅灰色边框，调整边框为 1px */

    /* 按钮的阴影效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */

    /* 按钮文字颜色为灰色 */
    color: #888888;
    /* 设置字体颜色为灰色 */

    /* 鼠标悬停时效果 */
    transition: all 0.3s ease;
}

.custom-button:hover {
    background-color: #5dabf8;
    /* 悬浮时的背景色 */
    border-color: #56a9fc;
    /* 悬浮时的边框颜色 */
}

/* 按钮点击时的动态效果（使用 :active 伪类） */
.custom-button:active {
    transform: scale(0.95);
    /* 按钮点击时缩小 */
    background-color: #66b3ff;
    /* 按钮点击时的背景色 */
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
    /* 点击时的阴影 */
}

/* 自定义输入框样式 */
.custom-input {
    width: 10%;
    margin-right: 15px;
    /* 输入框之间的间距 */
    border-radius: 8px;
    /* 圆角 */
}

.el-input__inner {
    padding: 10px 15px;
    /* 调整内边距 */
    font-size: 14px;
    /* 设置字体大小 */

    border-radius: 8px;
    /* 圆角边框 */
    background-color: #f9f9f9;
    /* 背景颜色 */
}
</style>
